<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >资质认证</navbar
    >
    <div style="height: 0.45rem"></div>
    <van-notice-bar left-icon="info-o" text="完成实名认证后，可开通咨询服务" />
    <div class="content">
      <van-steps :active="active">
        <van-step>执业信息</van-step>
        <van-step>执业证件</van-step>
        <van-step>实名信息</van-step>
      </van-steps>
      <div v-if="active == 0" class="person">
        <p class="tips">(为了给您提供更好的服务，请您填写真实信息)</p>
        <van-form @submit="onSubmit">
          <van-field
            v-model="formList.realName"
            name="realName"
            label="真实姓名"
            placeholder="请填写真实姓名"
            :rules="[{ required: true, message: '请填写真实姓名' }]"
          />
          <van-field
            readonly
            clickable
            name="gender"
            :value="formList.gender"
            label="性别"
            placeholder="点击选择性别"
            :rules="[{ required: true, message: '请选择性别' }]"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="formList.age"
            name="age"
            label="年龄"
            placeholder="请填写年龄"
            :rules="[{ required: true, message: '请填写年龄' }]"
          />
          <van-field
            v-model="formList.hospitalName"
            name="hospitalName"
            label="所属医院(机构)"
            placeholder="请填写工作单位"
            :rules="[{ required: true, message: '请填写工作单位' }]"
          />
          <van-field
            v-model="formList.departmentName"
            name="departmentName"
            label="科室"
            placeholder="请填写科室"
            :rules="[{ required: true, message: '请填写科室' }]"
          />
          <van-field
            readonly
            clickable
            name="post"
            :value="formList.post"
            label="职称"
            placeholder="点击选择职称"
            :rules="[{ required: true, message: '请选择职称' }]"
            @click="showPicker2 = true"
          />
          <van-popup v-model="showPicker2" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns2"
              @confirm="onConfirm2"
              @cancel="showPicker2 = false"
            />
          </van-popup>
          <van-field
            v-model="formList.introduction"
            name="introduction"
            label="个人介绍"
            rows="2"
            autosize
            type="textarea"
            maxlength="500"
            show-word-limit
            placeholder="请填写个人介绍"
            :rules="[{ required: true, message: '请填写个人介绍' }]"
          />
          <van-field
            v-model="formList.skilled"
            name="skilled"
            label="擅长领域"
            rows="2"
            autosize
            type="textarea"
            maxlength="200"
            show-word-limit
            placeholder="请填写擅长领域"
            :rules="[{ required: true, message: '请填写擅长领域' }]"
          />
          <div v-if="active == 0" class="btn-group">
            <van-button round block type="info" native-type="submit"
              >下一步</van-button
            >
          </div>
        </van-form>
      </div>
      <div class="person" v-if="active == 1">
        <p class="tips">(请上传本人的执业证书照片)</p>
        <div class="post">
          <p class="title">医生执业证书</p>
          <p class="title2">
            请拍摄证书清晰照片，需包含姓名、个人照片及钢印、证书编码、执业医院
          </p>
          <van-uploader
            accept="image/*"
            v-model="fileList1"
            :after-read="afterRead"
            :before-delete="beforeDelete"
          >
            <!-- <div class="upload-class">
              <van-icon size="0.3rem" name="plus" />
              <p>点击上传</p>
            </div> -->
            <van-image
              width="0.8rem"
              height="0.8rem"
              style="margin: 0"
              :src="require('../../assets/images/up.png')"
            />
          </van-uploader>
          <p class="title2">示例：</p>
          <van-image
            class="van-images"
            @click="
              view('https://ds.pushiyixue.com/wx_upload/doctor/show2.jpg')
            "
            width="1rem"
            height="1rem"
            src="https://ds.pushiyixue.com/wx_upload/doctor/show2.jpg"
          />
        </div>
        <div class="post">
          <p class="title">职称证书</p>
          <p class="title2">
            主治及以上职称请提供职称证书，住院医师可上传工牌，请拍摄证书清晰照片，需包含姓名、个人照片及钢印
          </p>
          <van-uploader
            accept="image/*"
            v-model="fileList2"
            :after-read="afterRead2"
            :before-delete="beforeDelete2"
          >
            <!-- <div class="upload-class">
              <van-icon size="0.3rem" name="plus" />
              <p>点击上传</p>
            </div> -->
            <van-image
              width="0.8rem"
              height="0.8rem"
              style="margin: 0"
              :src="require('../../assets/images/up.png')"
            />
          </van-uploader>
          <p class="title2">示例：</p>
          <van-image
            class="van-images"
            @click="
              view('https://ds.pushiyixue.com/wx_upload/doctor/show1.jpg')
            "
            width="1rem"
            height="1rem"
            src="https://ds.pushiyixue.com/wx_upload/doctor/show1.jpg"
          />
          <van-image
            class="van-images"
            @click="
              view('https://ds.pushiyixue.com/wx_upload/doctor/show3.jpg')
            "
            width="1rem"
            height="1rem"
            src="https://ds.pushiyixue.com/wx_upload/doctor/show3.jpg"
          />
        </div>
        <div v-if="active == 1" class="btn-group">
          <van-button plain round block type="info" @click="backOne(0)"
            >上一步</van-button
          >
          <van-button round block type="info" @click="nextOne"
            >下一步</van-button
          >
        </div>
      </div>
      <div class="person" v-if="active == 2">
        <p class="tips">(请上传本人的身份证)</p>
        <div class="post">
          <p class="title">身份证照片</p>
          <p class="title2">上传本人身份证正反面照片</p>
          <van-uploader
            accept="image/*"
            v-model="fileList3"
            :after-read="afterRead3"
            :before-delete="beforeDelete3"
          >
            <van-image
              width="0.8rem"
              height="0.8rem"
              style="margin: 0"
              :src="require('../../assets/images/up.png')"
            />
          </van-uploader>
        </div>
        <p class="tips">(请上传本人的正面头像)</p>
        <div class="post">
          <p class="title">本人正面头像</p>
          <van-uploader
            accept="image/*"
            :max-count="1"
            v-model="fileList4"
            :after-read="afterRead4"
            :before-delete="beforeDelete4"
          >
            <van-image
              width="0.8rem"
              height="0.8rem"
              style="margin: 0"
              :src="require('../../assets/images/up.png')"
            />
          </van-uploader>
        </div>
        <div v-if="active == 2" class="btn-group">
          <van-button plain round block type="info" @click="backOne(1)"
            >上一步</van-button
          >
          <van-button round block type="info" @click="toShenHe"
            >提交审核</van-button
          >
        </div>
      </div>
      <div class="person" v-if="active == 3">
        <van-image
          width="1.8rem"
          height="1.8rem"
          :src="require('../../assets/images/shz.png')"
        ></van-image>
        <p class="big">等待工作人员审核中</p>
        <p class="big">请您耐心等候</p>
      </div>
      <div class="person" v-if="active == 4">
        <van-image
          width="1.8rem"
          height="1.8rem"
          :src="require('../../assets/images/shwc.png')"
        ></van-image>
        <p class="big">审核完成</p>
        <p class="big">已帮您开通咨询服务</p>
        <div v-if="active == 4" class="btn-group">
          <van-button round block @click="editMes" type="info"
            >修改资料,重新审核</van-button
          >
        </div>
      </div>
      <div class="person" v-if="active == 5">
        <van-image
          width="1.8rem"
          height="1.8rem"
          :src="require('../../assets/images/shsb.png')"
        ></van-image>
        <p class="big">审核失败</p>
        <p class="reason">失败原因:</p>
        <p class="reason">{{ formList.failReason }}</p>
        <div v-if="active == 5" class="btn-group">
          <van-button round block @click="editMes" type="info"
            >重新审核</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Toast, Dialog, Step, Steps, ImagePreview } from "vant";
import {
  setDoctorinfo,
  getDoctorinfo,
  uploadPractice,
  setPracticeCet,
  getPracticeCet,
  setIdpracticeCet,
} from "@/api/doctor";
import { mapGetters } from "vuex";
export default {
  name: "doctorAuthentication",
  data() {
    return {
      formList: {
        age: "",
        departmentName: "",
        gender: "",
        hospitalName: "",
        post: "",
        realName: "",
        skilled: "",
        introduction: "",
      },
      active: 0,
      columns: ["男", "女"],
      showPicker: false,
      columns2: ["主任医师", "副主任医师", "主治医师", "住院医师", "其他职称"],
      showPicker2: false,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      userDatas: null,
      dealArr1: [],
      dealArr2: [],
      dealArr3: [],
      dealArr4: [],
    };
  },

  components: { navbar },

  computed: {
    ...mapGetters(["userData"]),
  },

  created() {
    this.userDatas = JSON.parse(this.userData);
    this.getDoctorinfos();
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/dMine" });
    },
    // 获取信息
    getDoctorinfos() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      let data = {
        doctorId: this.userDatas.id,
      };
      getPracticeCet(data).then((res) => {
        if (res.data.status == 200) {
          this.formList = res.data.practiceCet;
          if (res.data.practiceCet.active == 3) {
            this.active = 3;
          } else if (res.data.practiceCet.active == 4) {
            this.active = 4;
          } else if (res.data.practiceCet.active == 5) {
            this.active = 5;
          }
          let arr = [],
            arr1 = [],
            arr2 = [],
            arr3 = [];
          let str =
            res.data.practiceCet.physicianCet &&
            res.data.practiceCet.physicianCet.length > 0
              ? res.data.practiceCet.physicianCet.split("#")
              : null;
          if (str != null) {
            str.forEach((item) => {
              arr.push({
                url: item,
              });
            });
          }
          this.fileList1 = arr;
          let str1 =
            res.data.practiceCet.postCet &&
            res.data.practiceCet.postCet.length > 0
              ? res.data.practiceCet.postCet.split("#")
              : null;
          if (str1 != null) {
            str1.forEach((item) => {
              arr1.push({
                url: item,
              });
            });
          }
          this.fileList2 = arr1;
          let str2 =
            res.data.practiceCet.idCet && res.data.practiceCet.idCet.length > 0
              ? res.data.practiceCet.idCet.split("#")
              : null;
          if (str2 != null) {
            str2.forEach((item) => {
              arr2.push({
                url: item,
              });
            });
          }
          this.fileList3 = arr2;
          let str3 =
            res.data.practiceCet.headImage && res.data.practiceCet.headImage.length > 0
              ? res.data.practiceCet.headImage.split("#")
              : null;
          if (str3 != null) {
            str3.forEach((item) => {
              arr3.push({
                url: item,
              });
            });
          }
          this.fileList4 = arr3;
          Toast.clear();
        } else {
          Toast.fail("获取信息失败");
        }
      });
    },
    // 第一步
    onSubmit(values) {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      let data = {
        id: this.userDatas.id,
        realName: values.realName,
        post: values.post,
        hospitalName: values.hospitalName,
        departmentName: values.departmentName,
        gender: values.gender,
        age: values.age,
        skilled: values.skilled,
        introduction: values.introduction,
        active: 1,
      };
      setDoctorinfo(data).then((res) => {
        if (res.data.status == 200) {
          this.active = 1;
          Toast.clear();
        } else {
          Toast.fail("提交失败，重新提交");
        }
      });
    },
    // 性别
    onConfirm(value, index) {
      this.formList.gender = value;
      this.showPicker = false;
    },
    // 职称
    onConfirm2(value, index) {
      this.formList.post = value;
      this.showPicker2 = false;
    },
    // 浏览
    view(i) {
      ImagePreview([i]);
    },
    //  下一步
    nextOne() {
      let { dealArr1, dealArr2, fileList1, fileList2 } = this;
      if (fileList1.length == 0) {
        Toast.fail("请至少上传一张执业证书图片");
      } else if (fileList2.length == 0) {
        Toast.fail("请至少上传一张职称证书图片");
      } else {
        let deal1 = [],
          deal2 = [];
        fileList1.forEach((item) => {
          if (item.url) {
            deal1.push(item.url);
          } else {
            dealArr1.forEach((items) => {
              if (items.str == item.file.name) {
                deal1.push(items.path);
              }
            });
          }
        });
        fileList2.forEach((item) => {
          if (item.url) {
            deal2.push(item.url);
          } else {
            dealArr2.forEach((items) => {
              if (items.str == item.file.name) {
                deal2.push(items.path);
              }
            });
          }
        });
        let str1 = deal1.join("#");
        let str2 = deal2.join("#");
        let data = {
          doctorId: this.userDatas.id,
          physicianCet: str1,
          postCet: str2,
          active: 2,
        };
        const toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          overlay: true,
          message: "加载中",
        });
        setPracticeCet(data).then((res) => {
          if (res.data.status == 200) {
            this.active = 2;
            Toast.clear();
          } else {
            Toast.fail("提交失败，重新提交");
          }
        });
      }
    },
    // 上一步
    backOne(i) {
      this.active = i;
    },
    //  审核
    toShenHe() {
      let { dealArr3, fileList3, dealArr4, fileList4 } = this;
      //身份证
      if (fileList3.length == 0) {
        Toast.fail("请上传身份证正反面");
      } else if (fileList4.length == 0) {
        Toast.fail("请上传本人头像");
      } else {
        let deal1 = [];
        fileList3.forEach((item) => {
          if (item.url) {
            deal1.push(item.url);
          } else {
            dealArr3.forEach((items) => {
              if (items.str == item.file.name) {
                deal1.push(items.path);
              }
            });
          }
        });
        let str1 = deal1.join("#");
        //头像
        let deal2 = [];
        fileList4.forEach((item) => {
          if (item.url) {
            deal2.push(item.url);
          } else {
            dealArr4.forEach((items) => {
              if (items.str == item.file.name) {
                deal2.push(items.path);
              }
            });
          }
        });
        let str2 = deal2.join("#");
        let data = {
          doctorId: this.userDatas.id,
          idCet: str1,
          headImage: str2,
          active: 3,
        };
        const toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          overlay: true,
          message: "加载中",
        });
        setIdpracticeCet(data).then((res) => {
          if (res.data.status == 200) {
            Toast.clear();
            Toast.success("提交成功！");
            setTimeout(() => {
              this.goBack();
            }, 800);
          } else {
            Toast.fail("提交失败，重新提交");
          }
        });
      }
    },
    // 删除前
    beforeDelete(file) {
      if (this.dealArr1.length > 0) {
        for (let i = 0; i < this.dealArr1.length; i++) {
          if ("url" in file) {
            return true;
          } else {
            if (this.dealArr1[i].str == file.file.name) {
              this.dealArr1.splice(i, 1);
              i--;
              return true;
            }
          }
        }
      } else {
        return true;
      }
    },
    //
    afterRead(file) {
      if (file.file) {
        var formData = new FormData();
        formData.append("file", file.file);
        formData.append("doctorId", this.userDatas.id);
        formData.append("route", 0);
        uploadPractice(formData).then((res) => {
          if (res.data.status == 200) {
            let str = res.data.image.match(/practice\/(\S*)/)[1];
            let data = {
              path: res.data.image,
              str: str,
            };
            this.dealArr1.push(data);
          }
        });
      }
    },
    // 删除前
    beforeDelete2(file) {
      if (this.dealArr2.length > 0) {
        for (let i = 0; i < this.dealArr2.length; i++) {
          if ("url" in file) {
            return true;
          } else {
            if (this.dealArr2[i].str == file.file.name) {
              this.dealArr2.splice(i, 1);
              i--;
              return true;
            }
          }
        }
      } else {
        return true;
      }
    },
    //
    afterRead2(file) {
      if (file.file) {
        var formData = new FormData();
        formData.append("file", file.file);
        formData.append("doctorId", this.userDatas.id);
        formData.append("route", 1);
        uploadPractice(formData).then((res) => {
          if (res.data.status == 200) {
            let str = res.data.image.match(/post\/(\S*)/)[1];
            let data = {
              path: res.data.image,
              str: str,
            };
            this.dealArr2.push(data);
          }
        });
      }
    },
    // 删除前
    beforeDelete3(file) {
      if (this.dealArr3.length > 0) {
        for (let i = 0; i < this.dealArr3.length; i++) {
          if ("url" in file) {
            return true;
          } else {
            if (this.dealArr3[i].str == file.file.name) {
              this.dealArr3.splice(i, 1);
              i--;
              return true;
            }
          }
        }
      } else {
        return true;
      }
    },
    //
    afterRead3(file) {
      if (file.file) {
        var formData = new FormData();
        formData.append("file", file.file);
        formData.append("doctorId", this.userDatas.id);
        formData.append("route", 2);
        uploadPractice(formData).then((res) => {
          if (res.data.status == 200) {
            let str = res.data.image.match(/id\/(\S*)/)[1];
            let data = {
              path: res.data.image,
              str: str,
            };
            this.dealArr3.push(data);
          }
        });
      }
    },
    // 删除前
    beforeDelete4(file) {
      if (this.dealArr4.length > 0) {
        for (let i = 0; i < this.dealArr4.length; i++) {
          if ("url" in file) {
            return true;
          } else {
            if (this.dealArr4[i].str == file.file.name) {
              this.dealArr4.splice(i, 1);
              i--;
              return true;
            }
          }
        }
      } else {
        return true;
      }
    },
    //
    afterRead4(file) {
      if (file.file) {
        var formData = new FormData();
        formData.append("file", file.file);
        formData.append("doctorId", this.userDatas.id);
        formData.append("route", 3);
        uploadPractice(formData).then((res) => {
          if (res.data.status == 200) {
            let str = res.data.image.match(/headimg\/(\S*)/)[1];
            let data = {
              path: res.data.image,
              str: str,
            };
            this.dealArr4.push(data);
          }
        });
      }
    },
    // 修改资料
    editMes() {
      let { fileList3, fileList4 } = this;
      let deal1 = [],
        deal2 = [];
      fileList3.forEach((item) => {
        deal1.push(item.url);
      });
      let str1 = deal1.join("#");
      fileList4.forEach((item) => {
        deal2.push(item.url);
      });
      let str2 = deal2.join("#");
      let data = {
        doctorId: this.userDatas.id,
        idCet: str1,
        headImage: str2,
        active: 0,
      };
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      setIdpracticeCet(data).then((res) => {
        if (res.data.status == 200) {
          Toast.clear();
          this.active = 0;
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .content {
    width: 95%;
    margin: auto;
    margin-top: 0.05rem;
    padding-bottom: 0.2rem;
    & .person {
      background: #fff;
      box-shadow: 0.01rem 0.01rem 0.05rem #b1b1b1;
      margin: 0.1rem 0 0.6rem 0;
      padding-top: 0.1rem;
      padding-bottom: 0.05rem;
      border-radius: 0.1rem;
      & .van-form {
        margin-bottom: 0.1rem;
      }
      & .head {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0.1rem;
        margin-top: 0.2rem;
        & p {
          margin-left: 0.1rem;
          font-size: 0.16rem;
          color: black;
        }
      }
      & .tips {
        font-size: 0.14rem;
        color: #999999;
        margin: 0.1rem 0;
      }
      & .van-uploader {
        margin: 0.2rem 0;
        display: block;
        margin-left: 0.1rem;
      }
      & .post {
        text-align: left;
        padding: 0.1rem;

        & .title {
          font-size: 0.14rem;
          color: black;
        }
        & .title2 {
          font-size: 0.12rem;
          margin-top: 0.05rem;
          color: #999999;
        }
        & .van-images {
          margin-top: 0.1rem;
          margin-right: 0.1rem;
        }
      }
      & .btn-group {
        position: fixed;
        width: 100%;
        background: #fff;
        left: 50%;
        padding: 0.05rem;
        transform: translateX(-50%);
        bottom: 0;
        z-index: 10;
        display: flex;
        justify-content: space-around;
        & .van-button {
          width: 45%;
        }
      }
      & .big {
        margin-top: 0.1rem;
        font-size: 0.18rem;
        margin-bottom: 0.11rem;
      }
      & .reason {
        font-size: 0.16rem;
        margin-bottom: 0.11rem;
        text-align: left;
        margin-left: 0.2rem;
      }
    }
  }
}
/deep/ .van-step__title {
  float: left;
  font-size: 0.14rem;
}
.van-uploader__input-wrapper {
  & .upload-class {
    // padding: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 0.8rem;
    height: 0.8rem;
    border: 1px dashed #cccccc !important;
    box-sizing: border-box;
    & p {
      font-size: 0.12rem;
      margin-top: 0.05rem;
    }
  }
}
</style>